Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / network-visualiser / internal / NetworkVisualiserLoadingOverlay.vue

Displaying Raw • Download

Tb4b4b4<Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3isLoadingTa5d6ff"

Te6edf3classTff7b72=Ta5d6ff"absolute inset-0 z-20 flex items-center justify-center bg-zinc-950/10 backdrop-blur-[2px] transition-all duration-300"

Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"bg-white/90 dark:bg-zinc-900/90 border border-gray-200 dark:border-zinc-800 rounded-2xl px-6 py-4 flex flex-col items-center gap-3"

Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"relative"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"absolute inset-0 flex items-center justify-center"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"w-6 h-6 border-4 border-emerald-500/20 border-b-emerald-500 rounded-full animate-spin-reverse"

Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-sm font-medium text-gray-900 dark:text-zinc-100"Tb4b4b4>Tff7b72{{ Te6edf3loadingStatus Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3totalNodesToLoad Tff7b72> T79c0ff0Ta5d6ff" Te6edf3classTff7b72=Ta5d6ff"w-48 space-y-2"Tb4b4b4>

Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"h-1.5 bg-gray-200 dark:bg-zinc-800 rounded-full overflow-hidden"Tb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3classTff7b72=Ta5d6ff"h-full bg-blue-500 transition-all duration-300 shadow-[0_0_8px_rgba(59,130,246,0.5)]"

Tb4b4b4:Te6edf3styleTff7b72=Ta5d6ff"Tb4b4b4{ Te6edf3widthTff7b72: Ta5d6ff`Tffd700${Tb4b4b4(Te6edf3loadedNodesCount Tff7b72/ Te6edf3totalNodesToLoadTb4b4b4) Tff7b72* T79c0ff100Tffd700}Ta5d6ff%Ta5d6ff` Tb4b4b4}Ta5d6ff"

Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tff7b72div

Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3totalBatches Tff7b72> T79c0ff0Ta5d6ff"

Te6edf3classTff7b72=Ta5d6ff"flex justify-between items-center text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider"

Tb4b4b4>

Tb4b4b4<Tff7b72spanTb4b4b4>Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"visualiser.batch"Tb4b4b4) Tff7b72}} Tff7b72{{ Te6edf3currentBatch Tff7b72}} / Tff7b72{{ Te6edf3totalBatches Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>

Tb4b4b4<Tff7b72spanTb4b4b4>Tff7b72{{ Tffa657MathTb4b4b4.Te6edf3roundTb4b4b4(Tb4b4b4(Te6edf3loadedNodesCount Tff7b72/ Te6edf3totalNodesToLoadTb4b4b4) Tff7b72* T79c0ff100Tb4b4b4) Tff7b72}}%Tb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>

Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>

Tb4b4b4<Tff7b72scriptTb4b4b4>

Tff7b72export Tff7b72default Tb4b4b4{

Te6edf3nameTff7b72: Ta5d6ff"NetworkVisualiserLoadingOverlay"Tb4b4b4,

Te6edf3propsTff7b72: Tb4b4b4{

Te6edf3isLoadingTff7b72: Tb4b4b4{ Te6edf3typeTff7b72: Tffa657BooleanTb4b4b4, Tff7b72defaultTff7b72: Tff7b72false Tb4b4b4}Tb4b4b4,

Te6edf3loadingStatusTff7b72: Tb4b4b4{ Te6edf3typeTff7b72: Tffa657StringTb4b4b4, Tff7b72defaultTff7b72: Ta5d6ff"" Tb4b4b4}Tb4b4b4,

Te6edf3totalNodesToLoadTff7b72: Tb4b4b4{ Te6edf3typeTff7b72: Tffa657NumberTb4b4b4, Tff7b72defaultTff7b72: T79c0ff0 Tb4b4b4}Tb4b4b4,

Te6edf3loadedNodesCountTff7b72: Tb4b4b4{ Te6edf3typeTff7b72: Tffa657NumberTb4b4b4, Tff7b72defaultTff7b72: T79c0ff0 Tb4b4b4}Tb4b4b4,

Te6edf3currentBatchTff7b72: Tb4b4b4{ Te6edf3typeTff7b72: Tffa657NumberTb4b4b4, Tff7b72defaultTff7b72: T79c0ff0 Tb4b4b4}Tb4b4b4,

Te6edf3totalBatchesTff7b72: Tb4b4b4{ Te6edf3typeTff7b72: Tffa657NumberTb4b4b4, Tff7b72defaultTff7b72: T79c0ff0 Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4,

Tb4b4b4}Tb4b4b4;

Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>